<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title></title>
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@1.6/lib/index.css">
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vant@1.6/lib/vant.min.js"></script>
		<script src="https://unpkg.com/vue-lazyload/vue-lazyload.js"></script>
		<script src="../js/ajax.js"></script>

	</head>
	<body>
		<div id="app">
				<van-row>
					<van-col span="22" >
						<van-search placeholder="请输入搜索关键词" v-model="value" size="50" ></van-search>
					</van-col>
					<van-col span="1">
						<van-goods-action-mini-btn icon="chat-o"></van-goods-action-mini-btn>
					</van-col>
				</van-row>
			<van-row>
				<van-col span="6">
					<van-badge-group :active-key="activeKey" @change="onChange">
						<van-badge :title="item.Name"  @click="change(item)" v-for="item in Categories">
							
						</van-badge>
					</van-badge-group>
				</van-col>
				<van-col span="18" >
					<van-col span="12" v-for="item in Products">
						<div style="width: 100%;">
							<img v-lazy="item.GoodsImageUrl" style="width: 100%;height: 200px;" alt="">
						</div>
						<div style="font-size: 15px;letter-spacing: -1px;font-weight: 100;">
							{{item.Name}}
						</div>
						<div style="color: red;">
							{{item.MarketPrice}}
						</div>
						<div style="font-weight: 100;">
							{{item.VirtualSaleCount}}<span style="margin-left: 10px;">销量</span>
						</div>
						<div style="font-weight: 100;">
							{{item.BrowseCount}}<span style="margin-left: 10px;">次浏览</span>
						</div>
					</van-col>		
				</van-col>
			</van-row>
		</div>
		<script>
			Vue.use(VueLazyload, {
				error: "../img/detail_default.jpg",
				loading:'./static/005002J60-3.jpg'
			});
			var app = new Vue({
				el: "#app",
				data: {
					activeKey: 1,
					value: "",
					Categories:[],
					Products:[]
					
				},

				methods:{
					onChange(key) {
						this.activeKey = key;
					},
					change:function(item){
                        this.getProduct(this.Categories[this.activeKey].Id)
                    },
					getment: function() {
						var _this=this;
						ajax({
							url: "http://dsapi.ysd3g.com/api/Categories",
							dataType: "jsonp", 
							success: function(str) { 
								_this.Categories=str.Categories;
								 _this.getProduct(_this.Categories[_this.activeKey].Id)
								console.log(str)
							}
						})
					},
					getProduct:function(id){
						_this=this
                        ajax({
                            url:"http://dsapi.ysd3g.com/api/GoodsByCategoryId",
                            dataType:"jsonp",
                            data:{
                              typeId:id, 
                              p:1  
                            },
                            success:function(res){
								_this.Products=res.Data;
                             console.log(res)
                            }
                        })
                    }
					 
				},
				created: function() {
					
					this.getment();
				}
			})
		</script>
	</body>
</html>
